<template>
	<view class="search-shop-page">
		<view class="top-box">
			<image class="back-ic" src="../../static/ic_back_grey.png" @click="goBack"></image>
			<view class="input-box">
				<image src="../../static/ic_search.png" class="search-ic"></image>
				<input 
					v-model="shopName"
					placeholder-class="font-999-28"
					class="font-333-28"
					placeholder="请输入店铺名称"
					maxlength="30"
					type="text"
					confirm-type="search"
					@confirm="handleSearch"
					@input="changeInputValue"
				/>
			</view>
		</view>
		<!--  搜索历史 -->
		<view class="column-container width-100p" v-if="!showSearchResult">
			<view class="history-top-box">
				<text class="font-333-28 font-weight-600">搜索历史</text>
				<text class="font-333-28" @click="showClearWindow = true">清空记录</text>
			</view>
			<view class="history-list-box">
				<text class="single-history-box" @click="clickHistoryItem(historyItem)"
				v-for="(historyItem , historyIndex) in historyList" :key="historyIndex">
					{{historyItem}}
				</text>
			</view>
		</view>
		
		<!-- 搜索结果 -->
		<view class="column-container" v-if="showSearchResult">
			<view class="search-top-box" v-if="shopList.length > 0">
				<text class="font-666-28">与搜索词</text>
				<text class="font-333-28 font-weight-600">“{{shopName}}”</text>
				<text class="font-666-28">相关的店铺</text>
			</view>
			<view class="column-container width-100p" v-if="shopList.length > 0">
				<view v-for="(shopItem , shopIndex) in shopList" :key="shopIndex" class="data-item">
					<view class="row-container width-100p">
						<view class="item-img-box">
							<image class="item-img" :src="shopItem.logo"></image>
							<text class="brand-tag" v-if="shopItem.checkBrand">品牌</text>
						</view>
						
						<view class="column-container width-100p">
							<text class="shop-name">{{shopItem.showName}}</text>
							<view class="brand-img-box">
								<image :src="brandImg" 
								class="brand-img" mode="heightFix" 
								v-for="(brandImg , brandImgIndex) in shopItem.brandImgList" :key="brandImgIndex"></image>
							</view>
							<text class="font-999-24" style="margin-top: 7rpx;">
							 距您：{{shopItem.distanceStr}}</text>
						</view>
					</view>
					<view class="column-container width-100p">
						<view class="shop-item" v-for="(shopSingleItem , shopSingleIndex) in shopItem.shopList" 
						:key="shopSingleIndex" @click="clickEnterShop(shopSingleItem)">
							<view class="row-container">
								<view class="row-container" style="width: 200rpx;">
									<image class="shop-brand-ic" :src="shopSingleItem.minBrandImg"></image>
									<!-- <image class="shop-brand-ic" v-if="shopSingleItem.brandName == '美团'"
									 src="../../static/ic_mt_small.png"></image>
									<image class="shop-brand-ic" v-if="shopSingleItem.brandName == '饿了么'"
									  src="../../static/ic_ele_small.png"></image> -->
									<text class="font-333-26 font-weight-600">{{shopSingleItem.brandName}}店铺</text>
								</view>
								<text class="font-333-24">月曝光率：{{shopSingleItem.clickCount}}</text>
							</view>
							<text class="enter-shop" v-if="shopSingleItem.shopCodeImg">进入店铺</text>
						</view>
					</view>
					
					
				</view>
			
			</view>
			
			<!-- 搜索无数据 -->
			<view class="column-container-row-center width-100p" v-else>
				<image class="no-result-img" src="../../static/ic_empty_list.png"></image>
				<view class="row-container">
					<text class="font-666-28">很抱歉，暂无与搜索词</text>
					<text class="font-333-28 font-weight-600">“{{shopName}}”</text>
					<text class="font-666-28">相关的店铺</text>
				</view>
			</view>
		</view>
		
		<view class="clear-window" v-if="showClearWindow">
			<view class="clear-window-inner">
				<text class="font-333-32 font-weight-600 mt-44">确定清空历史搜索记录吗？</text>
				<view class="line-divider"></view>
				<view class="row-container width-100p" style="height: 96rpx;">
					<text class="btn" @click="showClearWindow = false">我再想想</text>
					<view class="vertical-line"></view>
					<text class="btn" style="font-weight: bold;color: #333333;background: #FFC01F;border-bottom-right-radius: 36rpx;"
					 @click="handleClearHistory">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 去店铺点餐弹窗 -->
		<view class="to-shop-window" v-if="showToShopWindow" catchtouchmove="true">
			<view class="to-shop-box">
				<image class="to-shop-shadow-bg" src="../../static/bg_shadow_buy_window.png"></image>
				<text class="font-333-36 font-weight-600">去店铺点餐</text>
				<image class="shop-code-img" :src="chosenShopCodeImg" :show-menu-by-longpress="true"></image>
				<view class="row-container" style="position: relative;">
					<image src="../../static/bg_long_divider.png" class="long-divider"></image>
					<text class="font-333-28 font-weight-600" style="z-index: 101;">长按二维码，进入店铺点餐</text>
				</view>
				<text class="font-666-28" style="padding: 32rpx;" @click="showToShopWindow=false">我再想想</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName:'',
				historyList:[],
				latitude:0.0 ,
				longitude:0.0,
				page:1,
				showSearchResult:false,
				shopList:[],
				showClearWindow:false,
				hasMoreData:false,
				showToShopWindow:false,
				chosenShopCodeImg:'' , //当前点击的店铺二维码图片
			}
		},
		
		onLoad() {
			this.latitude = this.cookie.get('jx_lat')
			this.longitude = this.cookie.get('jx_lng')
			let historyInfo = uni.getStorageSync("sp_history_shop")
			if (historyInfo){
				this.historyList = historyInfo.split(',')
			}
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadShopList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadShopList()
			}
		},
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			changeInputValue(e){
				if (!e.detail.value){
					this.showSearchResult = false
					this.shopList = []
					this.page = 1
				}
			},
			
			//点击进入店铺  若有店铺的id  则直接跳转对应的饿了么或者美团小程序  若有店铺二维码  则显示店铺二维码
			clickEnterShop(shopData){
				let that = this
				if (shopData.threeCode && shopData.brandName == "美团"){
					//有第三方id  则跳转到美团外卖小程序商家详情
					uni.navigateToMiniProgram({
						appId:'wx2c348cf579062e56',
						path:'/packages/restaurant/restaurant/restaurant?poi_id=' + shopData.threeCode,
						success() {
							that.commitClickEnter(shopData.id)
						}
					})
				} else { //否则显示小程序图标
					if (shopData.shopCodeImg){
						this.chosenShopCodeImg = shopData.shopCodeImg
						this.showToShopWindow = true
						this.commitClickEnter(shopData.id)
					}
				}
			},
			
			//点击进入店铺提交接口
			commitClickEnter(shopId){
				let that = this
				this.http({
					url:'/common/shop/clickShop',
					method:'POST',
					hideLoading:true,
					data:{
						shopId:shopId
					},
					success(res){
					},
					failed(e){
					}
				})
			},
			
			handleSearch(e){
				if (e.detail.value){
					this.shopName = e.detail.value
					if (this.historyList.findIndex((item => item == this.shopName)) == -1){
						this.historyList.push(this.shopName)
					}
					
					if (this.historyList.length > 10){
						this.historyList.splice(0 , 1)
					}
					
					uni.setStorageSync("sp_history_shop" , this.historyList.join(','))
					this.page = 1
					this.loadShopList()
					this.showSearchResult = true
				}
			},
			
			handleClearHistory(){
				this.historyList = []
				uni.setStorageSync("sp_history_shop" , "")
				this.showClearWindow = false
			},
			
			clickHistoryItem(name){
				this.shopName = name
				this.page = 1
				this.loadShopList()
				this.showSearchResult = true
			},
			
			//加载店铺列表
			loadShopList(){
				if (!this.shopName){
					uni.showToast({
						title:"请输入店铺名称",
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:'/common/shop/shopList',
					method:'POST',
					data:{
						latitude : that.latitude,
						longitude : that.longitude,
						pageNo : that.page,
						pageSize : 10,
						shopName: that.shopName
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.shopList = res.data
							} else{
								that.shopList = [...that.shopList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
				
			},
			
		}
	}
</script>

<style lang="scss">
	.search-shop-page{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		position: relative;
		background: #F5F5F5;
	}
	
	.top-box{
		width: 100%;
		height: 88rpx;
		padding-top: 100rpx;
		background-color: white;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: fixed;
		z-index: 40;
		
		.back-ic{
			width: 64rpx;
			height: 64rpx;
			margin-left: 22rpx;
			margin-right: 14rpx;
		}
		
		.input-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 364rpx;
			height: 60rpx;
			background: #F5F5F5;
			border-radius: 30rpx;
			border: #DDDDDD 2rpx solid;
			padding-left: 20rpx;
			padding-right: 20rpx;
			
			.search-ic{
				width: 22rpx;
				height: 22rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.history-top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 60rpx);
		margin: 226rpx 30rpx 20rpx 30rpx;
	}
	
	.history-list-box{
		display: flex;
		flex-direction: row;
		width: calc(100% - 44rpx);
		margin-left: 22rpx;
		margin-right: 22rpx;
		flex-wrap: wrap;
		
		.single-history-box{
			padding: 11rpx 20rpx;
			font-size: 24rpx;
			color: #666666;
			background: white;
			border-radius: 4rpx;
			margin: 0rpx 8rpx 16rpx 8rpx;
			text-align: center;
		}
	}
	
	.search-top-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: calc(100% - 60rpx);
		margin: 226rpx 30rpx 20rpx 30rpx;
	}
	
	.data-item{
		display: flex;
		flex-direction: column;
		width: calc(100% - 100rpx);
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 16rpx;
		position: relative;
		
		
		.item-img-box{
			display: flex;
			flex-direction: row;
			width: 124rpx;
			height: 124rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
			position: relative;
			.item-img{
				width: 124rpx;
				height: 124rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}
			.brand-tag{
				width: 56rpx;
				height: 32rpx;
				position: absolute;
				left: 0;
				top: 0;
				color: white;
				font-weight: 600;
				text-align: center;
				line-height: 32rpx;
				font-size: 20rpx;
				background: linear-gradient(90deg, #F83131 0%, #FF6D3F 100%);
				border-top-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
				z-index: 10;
			}
		}
		
		.brand-img-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-wrap: wrap;
		}
		
		.brand-img{
			width: auto;
			height: 32rpx ;
			margin-top: 8rpx;
			margin-right: 11rpx;
		}
		
		.shop-name{
			font-weight: 600;
			font-size: 32rpx;
			color: #333333;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			max-width: 450rpx;
		}
		
		.shop-item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			border: #E9E9E9 2rpx solid;
			margin-top: 16rpx;
			border-radius: 10rpx;
			height: 80rpx;
			width: calc(100% - 40rpx);
			padding-left: 20rpx;
			padding-right: 20rpx;
			
			.shop-brand-ic{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			
			.enter-shop{
				padding: 5rpx 14rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: 600;
				background: #FFC01F;
				border-radius: 7rpx;
				text-align: center;
			}
			
		}
	}
	
	.no-result-img{
		width: 172rpx;
		height: 172rpx;
		margin-top: 476rpx;
		margin-bottom: 20rpx;
	}
	
	.clear-window{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		z-index: 100;
		position: absolute;
		top: 0;
		flex: 1;
		
		.clear-window-inner{
			width: calc(100% - 148rpx);
			height: 230rpx;
			background: white;
			border-radius: 36rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.line-divider{
				width: 100%;
				height: 1rpx;
				background: #EEEEEE;
				margin-top: 44rpx;
			}
			
			.btn{
				width: 50%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				font-size: 32rpx;
				color: #999999;
			}
			
			.vertical-line{
				width: 1rpx;
				height: 96rpx;
				background: #EEEEEE;
			}
		}
		
	}
	
	.to-shop-window{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 100;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.to-shop-box{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: calc(100% - 148rpx);
			margin-left: 74rpx;
			margin-right: 74rpx;
			padding-top: 44rpx;
			background: white;
			border-radius: 30rpx;
			position: relative;
			
			.to-shop-shadow-bg{
				width: 100%;
				height: 220rpx;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.shop-code-img{
				width: 380rpx;
				height: 380rpx;
				margin-top: 44rpx;
				margin-bottom: 32rpx;
			}
			
			
			.long-divider{
				position: absolute;
				top: 28rpx;
				width: 333rpx;
				height: 9rpx;
			}
		}
		
	}
	
</style>
